import React, { Component } from 'react';
import {
	StyleSheet, View, Text, ScrollView,
	Image, DeviceEventEmitter
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import StorageHelper from '../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../config/storage';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { ApprovalView, RefuseModal } from '../../../component/ModalVerifylComponent.js';
import ToastUtil from '../../../utils/toast';

const scale = GLOBAL.SCALE;

const sendApprovalDate = {}

export class MyPlanDetailPage extends Component {

	static navigationOptions = ({ navigation, navigationOptions }) => {
		return {
			headerTitle: '我的计划',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};



	constructor(props) {
		super(props);
		this.state = {
			pageStatus: {
				status: 'loading'
			},
			monthData: {},
			yearData: {},
			productNameSet: '',
			resultModalVisible: false,
			refuseModalVisible: false,
			keyboard: false,
			isLeader: false,
		}
		this.sendObj = {   // 参数
			productName: '',  // 商品名字
		}
		this.getApprovalView = this.getApprovalView.bind(this);
		this._fetchApproval = this._fetchApproval.bind(this);

		this.planId = this.props.navigation.state.params.planId;

		sendApprovalDate.planId = this.props.navigation.state.params.planId;
	}

	async _fetchApproval () {
		const responseData = await HTTP.POST(API_GENERATE(API.MY_PLAN_APP), sendApprovalDate);

		if (responseData) {
			ToastUtil.showSuccess('审批成功');
		}
	}

	getApprovalView () {
		const { isLeader } = this.state;
		return isLeader ? (
			<ApprovalView agreePress={async () => {
				sendApprovalDate.approvalType = 'PASS';
				this._fetchApproval();
			}} refusePress={() => {
				this.setState({
					refuseModalVisible: true
				})
			}} />
		) : null;
	}

	async	_getDetial () {
		let detialData = await HTTP.POST(API_GENERATE(API.MY_PLAN_DETIAL), {
			planId: this.planId
		});

		console.log(detialData)
		if (detialData && detialData.length) {
			this.setState({
				pageStatus: {
					status: 'data'
				},
				productNameSet: detialData[0].productName
			})
			this.sendObj.productName = detialData[0].productName;
			for (var i = 0; i < detialData.length; i++) {
				if (detialData[i].planCycle == '1') {   // 月 1
					this.setState({
						monthData: detialData[i]
					});
				} else if (detialData[i].planCycle == '2') {
					this.setState({
						yearData: detialData[i]
					})
					this.sendObj.yearId = detialData[0].planId;
				}
			}
		} else {
			this.setState({
				pageStatus: {
					status: 'empty'
				}
			})
		}
	}

	//初始化数据
	async componentWillMount () {
		this._getDetial();
		const accountStr = await StorageHelper.get(STORAGE_CONSTANT.USER_INFO_KEY);
		if (accountStr && accountStr.length) {
			const { userRoles } = JSON.parse(accountStr);
			if (userRoles && userRoles.length) {
				userRoles.forEach((role) => {
					const { roleName, roleCode } = role;
					console.log(roleCode, roleName);
					if (roleCode == 'ROLE_APP_LEADER') {
						this.setState({
							isLeader: true,
						});
					}
				});
			}
		}
	}

	componentWillUnmount () {
		DeviceEventEmitter.emit('passByValue', { value: true });
	}


	render () {
		let { pageStatus, monthData, yearData, productNameSet, refuseModalVisible } = this.state;
		const approvalView = this.getApprovalView();
		return (
			<View style={styles.container}>
				<View style={styles.head}>
					<Text style={styles.headText}>商品：{productNameSet}</Text>
				</View>
				<View style={styles.body}>
					<View style={{ flex: 1, marginBottom: 55 * scale }}>
						<ScrollView>
							{
								pageStatus.status === 'data' ?
									<View></View> : <View style={{ flex: 1 }}>
										<PageStatusIndex {...pageStatus} />
									</View>
							}

						</ScrollView>

					</View>

				</View>
				<View style={{ position: 'absolute', bottom: 0 }}>
					{approvalView}
				</View>
				<RefuseModal visible={refuseModalVisible} btnPress={(auditRemark) => {
					console.log(auditRemark);
					sendApprovalDate.approvalType = 'PASS';
					sendApprovalDate.auditRemark = auditRemark;
					this._fetchApproval();
				}} bgPress={() => {
					this.setState({
						refuseModalVisible: false,
					});
				}} />
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: style.color.bgGray,
	},
	head: {
		height: 90 * scale,
		backgroundColor: style.color.themeColor
	},
	headText: {
		backgroundColor: style.color.themeColor,
		fontSize: 18 * scale,
		color: style.color.white,
		lineHeight: 30 * scale,
		height: 30 * scale,
		paddingLeft: 20 * scale
	},
	body: {
		height: 450 * scale,
		marginLeft: 15 * scale,
		marginRight: 15 * scale,
		position: 'absolute',
		top: 42 * scale
	},
	planForm: {
		width: 345 * scale,
		height: 174 * scale,
	},
	planBox: {
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
	},
	planName: {
		fontSize: 13 * scale,
		color: style.color.darkGray,
		lineHeight: 30 * scale,
		height: 30 * scale,
		marginTop: 4 * scale
	},
	playMore: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		width: 305 * scale,
		height: 40 * scale,

	},
	planInput: {
		fontSize: 18 * scale,
		color: '#101010',
		height: 40 * scale,
		lineHeight: 40 * scale,
		paddingTop: 0,
		paddingBottom: 0
	},
	planText: {
		fontSize: 18 * scale,
		color: '#101010',
		height: 40 * scale,
		lineHeight: 40 * scale,
	},

	monthBg: {
		marginTop: 5 * scale,
		width: 345 * scale,
		height: 130 * scale,
	},
	monthText: {
		fontSize: 14 * scale,
		textAlign: 'center',
		color: '#fff',
		height: 24 * scale,
		lineHeight: 24 * scale,
		paddingRight: 8 * scale
	},
	monthBox: {
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center',
		marginTop: 25 * scale
	},
	monthTitle: {
		height: 25 * scale,
		fontSize: 20 * scale,
		color: style.color.dark,
		textAlign: 'center',
	},
	monthP: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		marginTop: 8 * scale
	},
	planBottom: {
		height: 60 * scale,
		width: '100%',
		backgroundColor: style.color.white,
		position: 'absolute',
		bottom: 0,
	}


})